import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        <Result x={100}></Result>
      </div>
    )
  }
}
class Position extends React.Component{
  render(){
    console.log('this.props',this.props);
    return <>
      <div>
         x:{this.props.x},y:{this.props.y}
      </div>
    </>
  }
}
let Result=withMouseMove(Position)
/**
 * 高阶组件是一个函数,这个函数事宜with作为开头的
 * 高阶组件的参数是一个组件（类组件）
 * 该函数返回值也是一个组件 
 */
function withMouseMove(WrapperComponent){
  return class Mouse extends React.Component{
    constructor(){
      super()
      this.state={
        x:0,
        y:0
      }
    }
    handleMove=(e)=>{
      this.setState({
        x:e.clientX,
        y:e.clientY
      })
    }
    componentDidMount(){
      window.addEventListener('mousemove',this.handleMove)
    }
    componentWillUnmount(){
      window.removeEventListener('mousemove',this.handleMove)
    }
    render(){
      return <WrapperComponent {...this.state} {...this.props}></WrapperComponent>
    }
  }
}